<template>
  <div class="my-page-container">
    <!-- 左侧用户信息卡片 - 固定宽度 -->
    <div class="left-sidebar">
      <UserSidebar 
        :active-tab="activeTab" 
        @tab-change="handleTabChange" 
      />
    </div>
    
    <!-- 右侧内容区域 - 可滚动容器 -->
    <div class="right-content">
      <div class="scrollable-container">
        <main class="max-w-[800px] mx-auto px-4 lg:px-8 py-8">
          <ContentArea :active-tab="activeTab" />
        </main>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import UserSidebar from '@/components/my/UserSidebar.vue'
import ContentArea from '@/components/my/ContentArea.vue'

// 当前激活的标签页，默认为对话历史
const activeTab = ref('history')

// 处理标签页切换
const handleTabChange = (tab: string) => {
  activeTab.value = tab
}

// 根据URL参数设置初始标签页
onMounted(() => {
  const urlParams = new URLSearchParams(window.location.search)
  const tab = urlParams.get('tab')
  if (tab && ['history', 'favorites', 'custom-roles'].includes(tab)) {
    activeTab.value = tab
  }
})
</script>

<style scoped>
.my-page-container {
  width: 100%;
  height: calc(100vh - 64px); /* 减去导航栏高度 */
  background-color: #f9fafb;
  display: flex;
  box-sizing: border-box;
}

.left-sidebar {
  width: 320px;
  flex-shrink: 0;
  background-color: white;
  border-right: 1px solid #e5e7eb;
  height: 100%; /* 与容器同高 */
  position: sticky;
  top: 0;
  align-self: flex-start;
}

.right-content {
  flex: 1;
  min-width: 0;
  height: 100%; /* 与左侧边栏同高 */
  overflow: hidden; /* 防止外层滚动 */
}

.scrollable-container {
  height: 100%;
  overflow-y: auto; /* 只有内层滚动 */
  overflow-x: hidden;
}
</style>

